<template>
  <div class="contents-container">
    <div class="search-area">
      <span class="lable-span"><i class="el-icon-search" /> 用户</span>
      <el-input v-model="listQuery.ctcName" style="width: 180px;" size="mini" placeholder="请输入用户进行查询" />
      <span class="lable-span"><i class="el-icon-search" /> 时间</span>
      <el-date-picker
        v-model="searchTime"
        type="daterange"
        unlink-panels
        size="mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      />
      <el-button size="mini" class="ml-15" type="primary" @click="getDataList(1)">查询</el-button>
      <el-button size="mini" class="ml-15" @click="research">重置</el-button>
    </div>
    <el-table v-loading="listLoading" :data="listData" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="上传人姓名" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.perPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称">
        <template slot-scope="scope">
          <span>{{ scope.row.ctcName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属阶段" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.phaseName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日报时间" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.currentDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日报说明" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.dailyDesc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上报人角色" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.ctcUserType==10?'其他师傅':scope.row.ctcUserType==11?'搬运师傅':scope.row.ctcUserType==12?'敲打师傅':scope.row.ctcUserType==13?'泥水师傅': scope.row.ctcUserType==14?'水电师傅':scope.row.ctcUserType==15?'防水师傅':scope.row.ctcUserType==16?'木作师傅':'' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page-index.sync="listQuery.page"
      :page-size.sync="listQuery.limit"
      @pagination="getListData(listQuery.page)"
    />
    <PopWindow v-show="showDetail" title="日报详情" mode="detail" @close="showDetail = false">
      <el-form ref="formData" :model="formData" label-width="100px" size="small" class="detail">
        <el-form-item label="项目名称">
          <el-input v-model="formData.ctcName" readonly class="detailInput" />
        </el-form-item>
        <el-form-item label="项目地址">
          <el-input v-model="formData.ctcAddress" readonly class="detailInput" />
        </el-form-item>
        <el-form-item label="上传人姓名">
          <el-input v-model="formData.userName" class="my-input detailInput" readonly />
        </el-form-item>
        <el-form-item label="上传时间">
          <el-input v-model="formData.createTime" class="my-input detailInput" readonly />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formData.perPhone" class="my-input  detailInput" readonly />
        </el-form-item>
        <el-form-item label="所属阶段">
          <el-input v-model="formData.phaseName" readonly class="detailInput" />
        </el-form-item>
        <el-form-item label="日报说明">
          <el-input v-model="formData.dailyDesc" type="textarea" resize="none" readonly class="detailInput" />
        </el-form-item>
        <el-form-item label="日报图片">
          <div style="display:flex;flex-direction: row;flex-wrap: wrap;" class="newAddImg">
            <el-image
              v-for="(item,index) in formData.picturelist"
              v-if="formData.picturelist&&formData.picturelist.length>0"
              :key="'item'+index"
              :src="$urlHost+item"
              :preview-src-list="srcList"
              alt=""
              @click="gteImgList($urlHost+ item)"
            />
            <div v-if="!formData.picturelist||formData.picturelist.length==0">暂无</div>
          </div>
        </el-form-item>
      </el-form>
    </PopWindow>
  </div>
</template>

<script>
  import {
    getDayReportList,
    getDayReportDeatil
  } from '@/api/dayReport'
  import PopWindow from '@/components/PopWindow'
  import Pagination from '@/components/Pagination'
  export default {
    name: 'DayReport',
    components: {
      Pagination,
      PopWindow
    },
    data() {
      return {
        editable: false, // 日期选择器不可手动写入
        listLoading: false,
        total: 0, // 总数
        showDetail: false,
        formData: {
          ctcName: '', // 项目名称
          ctcAddress: '', // 项目标题
          ctcType: '', // 项目类型
          ctcDesc: '', // 项目描述
          flowId: '',
          userslist: [], // 业主
          matlist: [], // 材料预览表
          designPapers: [], // 设计师
          suplist: [], // 监理
          remark: '' // 备注
        },
        searchTime: '',
        timeOption: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        listQuery: {
          page: 1, // 当前页码
          limit: 10, // 每页数量
          ctcName: '', // 用户名
          startDate: '',
          endDate: ''
        },
        srcList: [], // 查看大图，日报列表
        listData: [] // 列表数据
      }
    },
    watch: {
      searchTime(value, oldValue) {
        if (value) {
          this.listQuery.startDate = this.searchTime[0]
          this.listQuery.endDate = this.searchTime[1]
        }
      }
    },
    mounted() {
      this.getListData()
    },
    methods: {
      getListData() {
        const that = this
        getDayReportList(that.listQuery).then(res => {
            that.$loadings().close()
            that.listData = res.data
            that.total = res.count
          })
          .catch(() => {
            that.$loadings().close()
          })
      },
      gteImgList(url) {
        this.srcList = []
        this.srcList.push(url)
      },
      getDataList(e) {
        this.listQuery.page = 1
        this.getListData()
      },
      handleDetail(row) {
        // 查看日报详情
        const that = this
        getDayReportDeatil({
            dailyId: row.dailyId
          }).then(res => {
            that.$loadings().close()
            that.formData = res.data
            that.formData.ctcName = row.ctcName
            that.formData.perPhone = row.perPhone
            that.formData.ctcAddress = row.ctcAddress
            that.formData.ctcUserType = row.ctcUserType
            that.formData.userName = row.userName
            that.showDetail = true
          })
          .catch(() => {
            that.$loadings().close()
          })
      },
      research() {
        this.listQuery = {
          page: 1, // 当前页码
          limit: 10, // 每页数量
          startDate: '',
          endDate: ''
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep {

    .detailInput .el-input__inner,
    .detailInput .el-textarea__inner {
      border: none;
    }

    .detail .el-form-item,
    .detail .el-form-item--mini.el-form-item,
    .detail .el-form-item--small.el-form-item {
      margin-bottom: 8px;
    }

  }

  ::v-deep .newAddImg .el-image {
    width: 148px;
    height: 148x;
    margin-right: 10px;
    cursor:pointer;
  }
</style>
